<template>
	<div class="mainCont">
		<div class="leftCont">
			<ul class="snav">
				<li v-if="permissions.indexOf(166)  != -1">
					<a href="#" @click="down2=!down2">项目 <span class="iconfont icon-up"
							:style="down2?'transform: rotateZ(180deg);':'transform: rotateZ(0deg);'"></span></a>
					<div class="down" v-if="down2">
						<router-link to="/allProject" v-if="$route.name=='allProject'" @click.native="flushCom"
							:class="$route.name=='allProject'?'active':''">全部项目
						</router-link>
						<router-link to="/allProject" v-else :class="$route.name=='allProject'?'active':''">全部项目
						</router-link>

						<router-link to="/principal" v-if="$route.name=='principal'" @click.native="flushCom"
							:class="$route.name=='principal'?'active':''">我负责的
						</router-link>
						<router-link to="/principal" v-else :class="$route.name=='principal'?'active':''">我负责的
						</router-link>

						<router-link to="/participation" v-if="$route.name=='participation'" @click.native="flushCom"
							:class="$route.name=='participation'?'active':''">我参与的
						</router-link>
						<router-link to="/participation" v-else :class="$route.name=='participation'?'active':''">我参与的
						</router-link>

						<router-link to="/attention" v-if="$route.name=='attention'" @click.native="flushCom"
							:class="$route.name=='attention'?'active':''">我关注的
						</router-link>
						<router-link to="/attention" v-else :class="$route.name=='attention'?'active':''">我关注的
						</router-link>

						<!-- <router-link to="/projectView" v-if="$route.name=='projectView'" @click.native="flushCom"
							:class="$route.name=='projectView'?'active':''">项目统计
						</router-link>
						<router-link to="/projectView" v-else :class="$route.name=='projectView'?'active':''">项目统计
						</router-link> -->
					</div>
				</li>
				<li v-if="permissions.indexOf(166)  != -1">
					<router-link to="/projectRequirement" v-if="$route.name=='projectRequirement'"
						@click.native="flushCom" :class="$route.name=='projectRequirement'?'active':''">项目需求
					</router-link>
					<router-link to="/projectRequirement" v-else :class="$route.name=='projectRequirement'?'active':''">
						项目需求</router-link>
				</li>
				<li v-if="permissions.indexOf(170)  != -1">
					<a href="#" @click="down3=!down3">任务<span class="iconfont icon-up"
							:style="down3?'transform: rotateZ(180deg);':'transform: rotateZ(0deg);'"></span> </a>
					<div class="down" v-if="down3">
						<router-link to="/task" v-if="$route.name=='task'" @click.native="flushCom"
							:class="$route.name=='task'?'active':''">全部任务</router-link>
						<router-link to="/task" v-else :class="$route.name=='task'?'active':''">全部任务
						</router-link>

						<router-link to="/sendMe" v-if="$route.name=='sendMe'" @click.native="flushCom"
							:class="$route.name=='sendMe'?'active':''">派给我的</router-link>
						<router-link to="/sendMe" v-else :class="$route.name=='sendMe'?'active':''">派给我的
						</router-link>

						<router-link to="/myParticipation" v-if="$route.name=='myParticipation'"
							@click.native="flushCom" :class="$route.name=='myParticipation'?'active':''">我参与的
						</router-link>
						<router-link to="/myParticipation" v-else :class="$route.name=='myParticipation'?'active':''">
							我参与的</router-link>

						<router-link to="/arrange" v-if="$route.name=='arrange'" @click.native="flushCom"
							:class="$route.name=='arrange'?'active':''">我安排的</router-link>
						<router-link to="/arrange" v-else :class="$route.name=='arrange'?'active':''">我安排的
						</router-link>

						<router-link to="/overdue" v-if="$route.name=='overdue'" @click.native="flushCom"
							:class="$route.name=='overdue'?'active':''">逾期任务</router-link>
						<router-link to="/overdue" v-else :class="$route.name=='overdue'?'active':''">逾期任务
						</router-link>

						<router-link to="/completed" v-if="$route.name=='completed'" @click.native="flushCom"
							:class="$route.name=='completed'?'active':''">已完成的</router-link>
						<router-link to="/completed" v-else :class="$route.name=='completed'?'active':''">已完成的
						</router-link>

						<router-link to="/foucs" v-if="$route.name=='foucs'" @click.native="flushCom"
							:class="$route.name=='foucs'?'active':''">我关注的
						</router-link>
						<router-link to="/foucs" v-else :class="$route.name=='foucs'?'active':''">我关注的
						</router-link>

						<router-link to="/failTask" v-if="$route.name=='failTask'" @click.native="flushCom"
							:class="$route.name=='failTask'?'active':''">失败任务
						</router-link>
						<router-link to="/failTask" v-else :class="$route.name=='failTask'?'active':''">失败任务
						</router-link>

					</div>
				</li>

				<li v-if="permissions.indexOf(174)  != -1">
					<a href="#" @click="down1=!down1">我的消息 <span class="iconfont icon-up"
							:style="down1?'transform: rotateZ(180deg);':'transform: rotateZ(0deg);'"></span></a>
					<div class="down" v-if="down1">

						<router-link to="/projectDynamics" v-if="$route.name=='projectDynamics'"
							@click.native="flushCom" :class="$route.name=='projectDynamics'?'active':''">项目动态
						</router-link>
						<router-link to="/projectDynamics" v-else :class="$route.name=='projectDynamics'?'active':''">
							项目动态
						</router-link>

						<router-link to="/dynamic" v-if="$route.name=='dynamic'" @click.native="flushCom"
							:class="$route.name=='dynamic'?'active':''">任务动态
						</router-link>
						<router-link to="/dynamic" v-else :class="$route.name=='dynamic'?'active':''">任务动态
						</router-link>


						<router-link to="/approve" v-if="$route.name=='approve'" @click.native="flushCom"
							:class="$route.name=='approve'?'active':''">待我审批
						</router-link>
						<router-link to="/approve" v-else :class="$route.name=='approve'?'active':''">待我审批
							<el-badge :value="num2" v-if="num2>0" class="item"></el-badge>
						</router-link>

						<router-link to="/unread" v-if="$route.name=='unread'" @click.native="flushCom"
							:class="$route.name=='unread'?'active':''">未读消息
						</router-link>


						<router-link to="/unread" v-else :class="$route.name=='unread'?'active':''">未读消息
							<el-badge :value="num" v-if="num>0" class="item"></el-badge>
						</router-link>


					</div>
				</li>

				<li v-if="permissions.indexOf(178)  != -1">
					<a href="#" @click="down6=!down6">模板管理 <span class="iconfont icon-up"
							:style="down6?'transform: rotateZ(180deg);':'transform: rotateZ(0deg);'"></span></a>
					<div class="down" v-if="down6">
						<router-link to="/xmTemplate" v-if="$route.name=='xmTemplate'" @click.native="flushCom"
							:class="$route.name=='xmTemplate'?'active':''">项目模板
						</router-link>
						<router-link to="/xmTemplate" v-else :class="$route.name=='xmTemplate'?'active':''">项目模板
						</router-link>

						<router-link to="/rwTemplate" v-if="$route.name=='rwTemplate'" @click.native="flushCom"
							:class="$route.name=='rwTemplate'?'active':''">任务模板
						</router-link>
						<router-link to="/rwTemplate" v-else :class="$route.name=='rwTemplate'?'active':''">任务模板
						</router-link>
					</div>
				</li>

				<li v-if="permissions.indexOf(181)  != -1">
					<a href="#" @click="down5=!down5">统计分析 <span class="iconfont icon-up"
							:style="down5?'transform: rotateZ(180deg);':'transform: rotateZ(0deg);'"></span></a>
					<div class="down" v-if="down5">
						<router-link to="/statistics" v-if="$route.name=='statistics'" @click.native="flushCom"
							:class="$route.name=='statistics'?'active':''">项目分析
						</router-link>
						<router-link to="/statistics" v-else :class="$route.name=='statistics'?'active':''">项目分析
						</router-link>

						<router-link to="/analysis" v-if="$route.name=='analysis'" @click.native="flushCom"
							:class="$route.name=='analysis'?'active':''">任务分析
						</router-link>
						<router-link to="/analysis" v-else :class="$route.name=='analysis'?'active':''">任务分析
						</router-link>

					</div>
				</li>

				<li v-if="permissions.indexOf(183)  != -1">
					<a href="#" @click="down8=!down8">设置 <span class="iconfont icon-up"
							:style="down8?'transform: rotateZ(180deg);':'transform: rotateZ(0deg);'"></span></a>
					<div class="down" v-if="down8">
						<router-link to="/demand" v-if="$route.name=='demand'" @click.native="flushCom"
							:class="$route.name=='demand'?'active':''">需求类型
						</router-link>
						<router-link to="/demand" v-else :class="$route.name=='demand'?'active':''">需求类型
						</router-link>

						<router-link to="/conference" v-if="$route.name=='conference'" @click.native="flushCom"
							:class="$route.name=='conference'?'active':''">会议类型
						</router-link>
						<router-link to="/conference" v-else :class="$route.name=='conference'?'active':''">会议类型
						</router-link>

					</div>
				</li>
			</ul>

		</div>

		<div class="rightCont">
			<router-view>
			</router-view>
		</div>

	</div>
</template>
<script type="text/babel">
	import Vue from 'vue'
	export default {
		name: "",
		data() {
			return {
				down1: true,
				down2: true,
				down3: true,
				down4: true,
				down5: true,
				down6: true,
				down7: true,
				down8: true,
				num:'',
				num2:'',
				permissions:[]
			};
		},
		mounted() {
			var that = this
			// console.log(that.$permissions)
			// if(!this.$route.params.title){
				
			// var url = ''
			
			// setTimeout(function(){
				that.permissions = that.$permissions
				
			// 	if(that.permissions.indexOf(166) != -1){
			// 		that.$router.push('/allProject');
			// 	}else if(that.permissions.indexOf(170) != -1){
			// 		that.$router.push('/task');
			// 	}else if(that.permissions.indexOf(174) != -1){
			// 		that.$router.push('/projectDynamics');
			// 	}else if(that.permissions.indexOf(178) != -1){
			// 		that.$router.push('/xmTemplate');
			// 	}else if(that.permissions.indexOf(181) != -1){
			// 		that.$router.push('/statistics');
			// 	}else if(that.permissions.indexOf(183) != -1){
			// 		that.$router.push('/demand');
			// 	}
				
			// },200)
			// }else{
			// 	that.permissions = that.$permissions
			// }
			
			 this.getnum()
			 this.getnum2()
		},
		created() {
			this.getnum()
			this.getnum2()
		},
		watch: {
		    $route: {
		      handler: function (route) {
		        const query = route.query;
				// console.log(route)
				this.getnum()
				this.getnum2()
		      },
		      immediate: true,
		    },
		},
		methods: {
			flushCom:function(){
				return
		　　},
		getnum2() {
			this.showloading = true
			var that = this
			this.$http.get(this.$url + '/xx/myAgreeCount?userId='+sessionStorage.getItem('uid'))
				.then(function(response) {
					if (response.data.code == '1410') {
						that.$Toast(response.data.msg);
						sessionStorage.setItem('token', '')
						that.$router.push('/login')
						return
					}
					that.num2 = response.data.count
					that.$forceUpdate()
				})
				.catch(function(error) {
					that.$Toast('网络拥堵，刷新一下');
				});
		},
			getnum() {
				this.showloading = true
				var that = this
				this.$http.get(this.$url + '/xx/unreadCount?userId='+sessionStorage.getItem('uid'))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.num = response.data.count
						that.$forceUpdate()
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
			},
		},

		computed: {
			
		},
	};
</script>
<style lang='less' scoped>
	.bla {
		color: #999;
		margin-left: 10px;
	}

	.bla:hover,
	.blactive {
		background: #4286f5;
		color: #fff;
		border-radius: 20px;
		text-align: center;
		margin-left: 10px;
	}

	/deep/sup {
		top: 0;
		margin-bottom: 3px;
	}

	/deep/.el-badge__content {
		height: auto;
		border: none;
		margin-left: 5px;
	}

	li {
		background: #fff;
		position: relative;
		z-index: 2;

	}

	.rightCont {
		position: relative;
	}

	.icon-up {
		transition: all .3s;
	}

	.down {
		transition: all .3s;
	}
</style>
